<template lang="">
    <div>
        <headers></headers>
        <titles :title="title"></titles>

        <!-- 搜索栏 -->
        <div class="searchLand" style="position: relative;">
            <div>
                <span>关键字:</span>
                <el-input clearable v-model="searchForm.itemsName" placeholder="请输入关键字"></el-input>
            </div>
            <div>
                <span>分类:</span>
                <el-select v-model="searchForm.tag" slot="prepend" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="数码" value="数码"></el-option>
                    <el-option label="服装" value="服装"></el-option>
                    <el-option label="书籍" value="书籍"></el-option>
                    <el-option label="饰品" value="饰品"></el-option>
                    <el-option label="箱包" value="箱包"></el-option>
                    <el-option label="洗浴美妆" value="洗浴美妆"></el-option>
                    <el-option label="电子设备" value="电子设备"></el-option>
                    <el-option label="日常用品" value="日常用品"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </div>
            <div>
                <span>排序:</span>
                <el-select v-model="searchForm.issueTime" slot="prepend" placeholder="请选择">
                    <el-option label="默认" value=""></el-option>
                    <el-option label="时间" value="1"></el-option>
                </el-select>
            </div>

            <el-button type="primary" @click="searchLost">搜索</el-button>
        </div>

        <div class="lostItems">
            <div class="lostItem" v-for="(item, index) in lostItems" :key="index" @click="toLostDetails(item)">
                <div class="info">
                    <div class="top">
                        <el-tag style="font-weight: bolder;" v-if="item.cardType=='寻找失主'" type="success" effect="dark">{{item.cardType}}</el-tag>
                        <el-tag style="font-weight: bolder;" v-if="item.cardType=='丢失物品'" type="danger" effect="dark">{{item.cardType}}</el-tag>
                        <span class="span"><i class="el-icon-view"></i> {{item.glanceCnt}}</span>
                    </div>
                    <div class="desc">
                        <p>#{{item.tag}}# &nbsp;<span style="font-size:13px;font-weight:400;">{{item.itemsName}}</span></p>
                    </div>
                    <div class="desc2">
                        <p>{{item.itemsDesc.length>16 ? item.itemsDesc.substring(0,12)+"...":item.itemsDesc}}</p>
                    </div>
                    <img v-if="item.plist" :src="item.plist[0]" alt="点击查看详情"></img>
                    <div class="issueTime">
                        <i class="el-icon-time"></i> 发布时间: {{item.issueTime}}
                    </div>
                </div>
                
            </div>
        </div>

        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.current" :page-sizes="[8,16,32,64]" :page-size="searchForm.size"
                layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total">
            </el-pagination>
        </div>

        <footers></footers>
    </div>
</template>
<script>
import { pageLost } from "../../utils/lost.js";
    export default {
        data() {
            return {
                lostItems: [],
                title: '',
                
                searchForm: {
                    itemsName: '',
                    tag: '',
                    issueTime: '',
                    current: 1,
                    size: 8,
                    total: 0
                },

                params: {
                    userId: "",
                    token: "",
                },
                
            }
        },
        mounted() {
            const {
                title
            } = this.$router.app._route.meta
            this.title = title
        },
        created() {
            this.params.userId = localStorage.getItem("user");
            this.params.token = this.$cookies.get("token");
            this.searchLost();
        },
        methods: {
            toLostDetails(val) {
                this.$router.push({
                    name: 'lostDetails',
                    query: {
                        id: val.id
                    }
                })
            },
            handleCurrentChange(val) {
                this.searchForm.current = val
                this.searchLost()
            },
            handleSizeChange(val) {
                this.searchForm.page = val
                this.searchLost()
            },
            searchLost() {
                pageLost(this.searchForm,this.params).then(res=>{
                    if(res.data.code==200){
                        this.lostItems = res.data.data.records;
                        this.searchForm.current = res.data.data.current;
                        this.searchForm.size = res.data.data.size;
                        this.searchForm.total = res.data.data.total;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
    }
</script>
<style lang="less" scoped>
    @import url('./index.less');
</style>